<template>
  <!-- 顾客退货 -->
  <div class="main-content-container">
    <div ref="search" class="app-search">
      <el-form ref="searchFormRef" label-width="80px" :inline="true">
        <el-row>
          <el-col :span="12" class="searchs-y">
            <el-form-item>
              <el-input v-model="custQuery" placeholder="姓名、手机号、会员号" clearable @change="handleChange">
                <el-button slot="append" icon="el-icon-search" @click="handleChange" />
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row class="float-l">
        <Search :data="selections" :attribute="'createdTime'" @change="handleTypeChange" @dateChange="handleDateChange" />
        <el-select v-model="query.warehouseId" class="el-select-y" placeholder="请选择仓库不限" :clearable="true" @change="warehouseChange">
          <el-option v-for="item in warehouseList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-row>
      <el-row class="margin-top">
        <TypeSelection class="TypeSelection" :data="datas" :default-value="0" :on-change="datasChange" />
      </el-row>
    </div>
    <div class="margin-top box-show">
      <el-table :data="list" border :row-class-name="tableColor" :height="innerHeight">
        <el-table-column label="退货单号" prop="dataCode" :show-overflow-tooltip="true" />
        <el-table-column label="来源" prop="source" :show-overflow-tooltip="true" />
        <el-table-column label="来源单号" prop="orderCode" :show-overflow-tooltip="true" />
        <el-table-column label="顾客" prop="customerName" :show-overflow-tooltip="true" />
        <el-table-column label="退单时间" prop="createdTime" :show-overflow-tooltip="true" />
        <el-table-column label="退单人" prop="orderMan" :show-overflow-tooltip="true" />
        <el-table-column label="仓库" prop="warehouseName" :show-overflow-tooltip="true" />
        <el-table-column label="状态" prop="status" :show-overflow-tooltip="true" />
        <el-table-column label="退货时间" prop="handDate" :show-overflow-tooltip="true" />
        <el-table-column label="操作员" prop="handler" :show-overflow-tooltip="true" />
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button type="text" @click="detailsHandle(row)">详情</el-button>
            <el-button v-if="row.status === '待退货'" type="text" @click="returnGoods(row)">退货</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :page-num="queryParams.page"
        :page-size="queryParams.pageSize"
        :on-change="handlePaginationChange"
        :total="total"
      />
    </div>
    <DetailsDialog v-if="visibleDetails" :visible.sync="visibleDetails" :current-row="currentRow" @handleClose="handleClose" />
    <ReturnGoodsDialog v-if="visible" :visible.sync="visible" :current-row="currentRow" @handleClose="handleClose" @successHandle="successHandle" />
  </div>
</template>
<script>
import { TypeSelection } from "@monkey.do/monkey";
import Search from "@/components/Search";
import { yTSDay } from "@/config";
import { warehouseList } from "@/utils/common";
import DetailsDialog from "./detailsDialog";
import ReturnGoodsDialog from "./returnGoodsDialog";
import { tableColor } from '@/utils/common.js';
export default {
  components: {
    Search,
    TypeSelection,
    DetailsDialog,
    ReturnGoodsDialog,
  },
  data() {
    return {
      tableColor,
      innerHeight: null,
      queryParams: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      total: 0,
      visible: false,
      warehousingVisible: false,
      visibleDetails: false,
      reveal: false,
      selections: yTSDay,
      custQuery: "",
      query: {
        status: "全部",
      },
      datas: [
        { id: 0, name: '全部' },
        { id: 1, name: '待退货' },
        // { id: 2, name: '待退款' },
        { id: 2, name: '已退货' },
        { id: 3, name: '已取消' },
        // { id: 4, name: '已退款' },
      ],
      list: [],
      currentRow: {},
      currentRowDetails: {},
      startReturnVisitContent: {},
      statrVisible: false,
      isDetails: false,
      warehouseList: [],
    };
  },
  computed: {
  },
  mounted() {
    this.warehouseList = warehouseList();
    this.getList();
    this.$nextTick(() => {
      var topHeight = (this.$refs.search.clientHeight + 160 + 105);
      var winHeight = document.body.clientHeight || document.documentElement.clientHeight;
      this.innerHeight = winHeight - topHeight;
    });
  },
  methods: {
    async getList() {
      const query = JSON.parse(JSON.stringify(this.query));
      if (query.status === "全部") query.status = undefined;
      if (!query.createdTime) {
        const date = new Date();
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const beginTime = year + "-" + month + "-" + day + " 00:00:00";
        const endTime = year + "-" + month + "-" + day + " 23:59:59";
        query.timeType = "today";
        query.createdTime = beginTime + "_" + endTime;
      }
      const res = await this.$api['warehouse/returnGoods/salesReturnPage']({ ...this.queryParams, query: { ...query, handType: "退货" }});
      if (res.code !== 200) return this.$message.error(res.msg);
      this.list = res.data.result;
      this.total = res.data.total;
    },
    handlePaginationChange(pagination) {
      this.queryParams = { page: pagination.pageNum, pageSize: pagination.pageSize };
      this.getList();
    },
    handleDateChange(item) {
      this.queryParams.page = 1;
      Object.assign(this.query, item);
      this.getList();
    },
    handleTypeChange(item) {
      this.queryParams.page = 1;
      Object.assign(this.query, item);
      this.getList();
    },
    datasChange(item) {
      this.queryParams.page = 1;
      this.$set(this.query, 'status', item.name);
      this.getList();
    },
    handleChange() {
      this.queryParams.page = 1;
      this.getList();
    },
    eliminate() {
      this.custQuery = "";
      this.queryParams.page = 1;
      this.getList();
    },
    handleClose() {
      this.visibleDetails = false;
      this.visible = false;
    },
    warehouseChange(val) {
      if (val) {
        this.query.warehouseId = val;
      } else {
        this.query.warehouseId = undefined;
      }
      this.getList();
    },
    async detailsHandle(row) {
      const res = await this.$api['warehouse/warehouseRecords/getPurchaseOrder']({ id: row.id });
      if (res.code !== 200) return this.$message.error(res.msg);
      this.currentRow = res.data;
      this.visibleDetails = true;
    },
    async returnGoods(row) {
      const res = await this.$api['warehouse/warehouseRecords/getPurchaseOrder']({ id: row.id });
      if (res.code !== 200) return this.$message.error(res.msg);
      this.currentRow = res.data;
      this.visible = true;
    },
    successHandle() {
      this.visible = false;
      this.queryParams.page = 1;
      this.getList();
    },
  },
};
</script>
<style scoped lang="scss">
.margin-top{
    margin-top: 10px;
}
.app-search .TypeSelection.m-type-selection /deep/ .el-radio-group .el-radio-button{
  margin-right: 10px;
}
</style>
